<template>
  <div class="header">
    <div class="header-top">
      <div class="header-wrap">
        <div class="header-login">
          <span>尚品汇欢迎您！</span>
          <span style="color: red" v-if="name"
            >{{ name }}
            <el-button type="text" @click="toLogout"
              >| 退出登录</el-button
            ></span
          >
          <span v-else
            >请 <router-link to="/login">登录 </router-link> |
            <router-link to="/register"> 免费注册</router-link></span
          >
        </div>
        <ul class="header-nav">
          <li>
            <router-link to="/center">我的订单</router-link>
          </li>
          <li><router-link to="/cart">我的购物车</router-link></li>
          <li>我的尚品汇</li>
          <li>尚品汇会员</li>
          <li>企业采购</li>
          <li>关注尚品汇</li>
          <li>合作招商</li>
          <li>商家后台</li>
        </ul>
      </div>
    </div>
    <div class="header-bottom">
      <router-link to="/home">
        <img src="./images/logo.png" alt="logo"
      /></router-link>
      <form class="header-form" @submit.prevent="toSearch">
        <input type="text" class="header-input" v-model="keyword" />
        <button
          class="header-btn text-slate-20 flex justify-center items-center"
        >
          搜索
        </button>
      </form>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'ZHeader',
  data() {
    return {
      keyword: this.$route.query.keyword,
    }
  },
  methods: {
    ...mapActions('user', ['logout']),
    async toLogout() {
      if (!confirm('确定要退出登录吗？')) return
      await this.logout()
      this.$message({
        showClose: true,
        message: '退出登录成功',
        type: 'success',
      })
      this.$router.replace('/login')
    },
    toSearch() {
      const query = { ...this.$route.query }
      if (this.keyword !== undefined) {
        query.keyword = this.keyword
      }
      // 编程式导航两次跳往同一个地址，会报错，可以用vue封装前的原生方法
      this.$router.history.push({
        name: 'Search',
        query,
      })
    },
  },
  computed: {
    ...mapState('user', ['name', 'token']),
  },
  watch: {
    $route(route) {
      this.keyword = route.query.keyword
    },
  },
}
</script>

<style lang="less">
.header {
  padding-bottom: 30px;
}
.header-top {
  background-color: #eaeaea;
  height: 30px;
  min-width: 1200px;
}
.header-wrap,
.header-bottom {
  box-sizing: border-box;
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.header-nav {
  display: flex;
}
.header-nav li {
  border-right: 1px solid #b3aeae;
  padding: 0 10px;
  cursor: pointer;
}
.header-nav li:hover a {
  text-decoration: underline;
  color: #e1251b !important;
}
.header-nav li:last-child {
  border-right: none;
  padding-right: 0px;
  margin-right: 0px;
}
.header-bottom {
  padding: 20px 0 0 50px;
}
.header-input {
  width: 450px;
  height: 34px;
  border: 2px solid #ea4a36;
  outline: none;
  padding: 0 5px;
}
.header-btn {
  width: 80px;
  background-color: #ea4a36;
  height: 34px;
  border: none;
  color: #fff;
  cursor: pointer;
}
.header-form {
  display: flex;
}
</style>
